<template>
  <view>
    <nav-bar title="康复资讯"></nav-bar>
    <you-tabs
			:activeName="tabActive"
      :tabsList="tabsList"
      @tabClick="clickTabItem"
		></you-tabs>
    <you-scroll
      :loadingHeight="loadingHeight"
      :mainHeight="scrollHeight"
      :isAllData="isAllData"
      :isRequestSuccess="isRequestSuccess"
      outPaddingTop="30rpx"
      @onRefresh="onRefresh"
      @loadMore="loadMore"
    >
      <template>
        <view v-if="isLoading" class="common-loading">
          <image class="loading-img" :src="baseIconUrl + '/commonIcon/icon_loading.png'" />
          正在加载数据，请稍后......
        </view>
        <view class="common-no-data" v-else-if="!newsList || newsList.length === 0">
          <image class="no-data-img" :src="baseIconUrl + '/commonIcon/icon_no_data.png'" />
          <view class="text">暂无数据</view>
        </view>
        <view v-else>
          <view
            class="news-item"
            v-for="(item, index) in newsList"
            :key="index"
            @click="clickNewsItem(item)"
          >
            <view class="img-box">
              <image
                class="img"
                :src="item.imgUrl"
                mode="aspectFill"
              />
            </view>
            <view class="content-box">
              <view class="title ellipsis-text">{{ item.title }}</view>
              <view class="desc">
                <rich-text  :nodes="item.briefContent"></rich-text>
              </view>
              <view class="time">{{ item.createTime }}</view>
            </view>
          </view>
        </view>
      </template>
    </you-scroll>
  </view>
</template>

<script>
  import api_user from '@/api/user'
  import { baseIconUrl, baseUrl } from '@/config'
  export default {
    name: 'NewsInfoList',
    data() {
      return {
        baseIconUrl,
        baseUrl,
        tabActive: 1,
        tabsList: [
					{ label: "特发性侧弯", name: 1 },
					{ label: "先天性脊柱侧弯", name: 2 },
					{ label: "脊柱侧弯融合手术", name: 3 }
				],
        loadingHeight: '',
        scrollHeight: '',
        isAllData: false,
        isRequestSuccess: false,
        isLoading: false,
        pageNum: 1,
        pageSize: 10,
        total: 0,
        newsList: []
      }
    },
    onLoad() {
      this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 48 - 15 + 'px'
      this.loadingHeight = this.$store.getters.heightData.noTabMainHeight - 68 - 15 + 'px'
      this.getNewsList()
    },
    methods: {
      getNewsList() {
        const params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          type: 1,
          newsType: this.tabActive
        }
        api_user.fetchNewsList(params).then(res => {
          if (res.code !== 200) return
          this.newsList.push(...res.rows.map(item => {
            return {
              ...item,
              briefContent: item.briefContent && item.briefContent.replace(/\n/g, '<br/>'),
              imgUrl: item.imgUrl && item.imgUrl.includes('http') ? item.imgUrl :
                      item.imgUrl ? this.baseUrl + item.imgUrl : ''  
            }
          }))
          this.isRequestSuccess = true
          this.total = res.total
        })
      },
      clickTabItem(value) {
        this.tabActive = value
        this.pageNum = 1
        this.isAllData = false
        this.isRequestSuccess = false
        this.newsList = []
        this.getNewsList()
      },
      clickNewsItem(item) {
        uni.navigateTo({
          url: `/subPages/userIndex/newsInfo/newsInfoDetail?id=${item.id}`
        })
      },
      // 下拉刷新
      onRefresh() {
        this.pageNum = 1
        this.newsList = []
        this.isAllData = false
        this.isRequestSuccess = false
        this.getNewsList()
      },
      // 上拉加载
      loadMore() {
        if (this.newsList.length < this.total) {
          this.pageNum++
          this.isAllData = false
          this.isRequestSuccess = false
          this.getNewsList()
        } else {
          this.isAllData = true
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .news-item {
    display: flex;
    margin: 0 30rpx 30rpx;
    padding: 30rpx;
    background-color: #FFF;
    .img-box {
      width: 180rpx;
      height: 120rpx;
      margin-right: 20rpx;
      border-radius: 16rpx;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .content-box {
      flex: 1;
      width: 0;
      .title {
        font-size: 28rpx;
        font-weight: 500;
        color: #333;
      }
      .desc {
        margin: 20rpx 0;
        font-size: 24rpx;
        font-weight: 500;
        line-height: 36rpx;
        color: #999;
        display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
        -webkit-box-orient: vertical; /* 设置伸缩盒子的子元素排列方式为垂直方向 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 显示省略号 */
        -webkit-line-clamp: 2; /* 设置最多显示的行数 */
      }
      .time {
        text-align: right;
        font-size: 24rpx;
        color: #999;
      }
    }
  }
</style>
